{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/title.css">
<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
	.title_headbox{
		position: relative;
		overflow: hidden;
		height: 11.2rem;
	}

	.title_headbox:before{
		content: '';
	    position: absolute;
	    top: -8%;
	    left: -8%;
	    right: -8%;
	    bottom: -8%;
	    -webkit-filter: blur(10px);
	    filter: blur(10px);
	    /*z-index: 1;*/
	    background-image: url('{$user_info.headimgurl}?imageMogr2/auto-orient/thumbnail/!200x200r/imageslim');
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: cover;
	     /*background-attachment: fixed; */
	}
	.title_headbox:after{
		content: '';
	    position: absolute;
	    top: -8%;
	    left: -8%;
	    right: -8%;
	    bottom: -8%;
	    background: rgba(0,0,0,.1);
	}
	.others_info_icon{
		z-index:1000;
	}

	.touxian {
		width: 90%;
		position: absolute;
		top: 8rem;
		left: 8%;
		text-align: center;
		font-size: 0;
	}
	.wear_tag {
		font-size: 0.5rem;
		color: #FFFFFF;
		line-height: 0.75rem;
		padding: 0 .25rem;
		/*background: #1f1c25;*/
		border-radius: 2px;
		display: inline-block;
		margin-bottom: .25rem;
		margin-right: .25rem;
	}

	/*头衔展示 start*/
	.title_show {
		width: 100%;
		height: 1.95rem;
		border-bottom: 0.05rem solid #efefef;
		background-color: #fff;
		margin-top: 0.5rem;
		position: relative;
	}

	.icon_t {
		width: 0.75rem;
		height: 0.65rem;
		background-image: url(/Public/Images/front/front_img/icon_touxian_me@3x.png);
		background-size: .75rem .65rem;
		position: absolute;
		top: 0.7rem;
		left: 38.13%;
	}

	.titleshow {
		height: 1.1rem;
		color: #323232;
		font-size: 0.8rem;
		line-height: 1.1rem;
		position: absolute;
		top: 0.45rem;
		left: 44.8%;
	}

	.title_disc {
		max-width: 12.3rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		left: 3.2%;
		padding-top: 10px;

	}
	/*头衔展示 end*/
</style>
{/block}
{block name="content"}
<div class="title_headbox" id='main'>
	<!-- <img  class="blur" src="{$user_info.headimgurl}" > --><!--背景图片，根据头像变化-->
	<!-- <canvas id='canvas' ></canvas>  -->
	<img class="others_personal_head" src="{$user_info.headimgurl}?imageMogr2/auto-orient/thumbnail/!200x200r/imageslim"/><!--个人头像-->
	<!--男女标志-->
	<!-- <div class="icon_gender_man"></div> -->
	<div class="{if $user_info.sex == 1}icon_gender_man {elseif  $user_info.sex == 2}icon_gender_male{/if}"></div>

	<a class="others_info_icon native_go" href="/FrontIndex/message_center">
		{if $is_read}<div class="point"></div>{/if}<!--有消息时显示这个红点-->
	</a>

	<p1>{$user_info.nickname}</p1><!--昵称-->

	<!--2017.09.18   su 显示佩戴头衔 start-->
	<div class="touxian">
		<div class="title_box" style="background: none; text-align: center; padding: 0;">
			{if !$my_wear_title}
			<p class="no_wear" style="color: rgba(255,255,255,1); -webkit-text-stroke: 0.3px rgba(255,255,255,0.6);line-height:2rem;font-size: 0.7rem;">您还没有佩戴任何头衔，最多可佩戴6个哦</p>
			{else}
			{foreach from = $my_wear_title item = this}
			<span class="wear_tag" data-title_id='{$this.title_id}'style="background-color:{$this.title_color}; background: {$this.title_color}; border: 0.05rem solid {$this.title_color};">{$this.title_name}</span>
			{/foreach}
			{/if}
		</div>
	</div>
	<!--2017.09.18   su 显示佩戴头衔 end-->
</div>
<!--<div class="wear_title">-->
	<!--<i class="icon_title_small wore_title"></i>-->
	<!--佩戴头衔-->
<!--</div>-->
<!--<div class="title_box">-->
	<!--{if !$my_wear_title}-->
	<!--<p class="no_wear" style="line-height:2.85rem">您还没有佩戴任何头衔，最多可佩戴6个哦</p>-->
	<!--{else}-->
	<!--{foreach from = $my_wear_title item = this}-->
	<!--<span class="wear_tag" data-title_id='{$this.title_id}'>{$this.title_name}</span>-->
	<!--{/foreach}-->
	<!--{/if}-->
<!--</div>-->
<div class="my_title">
	<i class="mytitle"></i>
	我的头衔&nbsp;<span class="remind">&nbsp;(点击头衔可佩戴，再次点击取消佩戴)</span>
</div>

<div class="title_box_2">
	{if !$my_title_list}
 		<p>您还没有领取任何头衔哦</p>
	{else}
		{foreach from = $my_title_list item = this}
		<span class="can_wear {if !$this.is_adorn}{if count($my_wear_title) == 6}full{else}wear{/if}{else}grey{/if}" data-title_id="{$this.title_id}">{$this.title_name}</span>
		{/foreach}
	{/if}
</div>

<div class="special_title" style="margin-bottom: 0.5rem;">
	<img class="title_icon" src="/Public/Images/front/front_img/icon_teshu@3x.png">
	<span class="special_title_name">自定义头衔定制</span>
	<a  class="native_go">
		<span class="goto_apply" style="width: auto;padding: 0 5px;background-color: #696969;">
			暂未开放
		</span>
	</a>
</div>

<!-- 2017.09.18 su 头衔列表 start-->
<div class="title_show">
	<span class="icon_t"></span>
	<span class="titleshow">头衔展示</span>
</div>

{if $title_list != null &&  $ordinary_list != null}
<ul class="get_title_list" style="margin-bottom: 60px;">

	{foreach from = $ordinary_list item =v}
	<li class="get_title">
		<span class="title_name wear_tag" style="background-color:{$v.color}; background: {$v.color};border: 0.05rem solid {$v.color};left: 3.2%; height: auto; width: auto;font-size: 0.8rem;padding: 3px 3px;">{$v.title_name}</span>
		<span class="title_disc">{$v.translate}，可领取<span style="color:{$v.color}; ">{$v.title_name}</span>头衔</span>
		<!--<span class="title_disc" style="left: 85%; padding-top: 12px; color: #dd1204">{$v.condition_num}</span>-->
		{if $v.is_receive}
		<span class="got_bt go_title a_link" data-title_id="{$v.title_id}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$v.title_id}">已领取</span>
		{else}
		<span class="{if $v.is_qualified}get_bt go_title a_link{else}get_bt cant{/if} " data-title_id="{$v.title_id}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$v.title_id}">{if $v.condition_num < $v.rank_up_num}未达成 <br> <span style="color: #000000;font-size:0.6rem;">{$v.condition_num}/{$v.rank_up_num}{else}可领取{/if}</span></span>
		{/if}
	</li>
	{/foreach}

	{foreach from = $title_list item =val}
	<li class="get_title">
		<span class="title_name wear_tag" style="background-color:{$val.color}; background: {$val.color};border: 0.05rem solid {$val.color};left: 3.2%; height: auto; width: auto;font-size: 0.8rem;padding: 3px 3px;">{$val.title_name}</span>
		<span class="title_disc" style="left: 3.2%; padding-top: 3px;">{if $val.translate != null }{$val.translate}{else}达成特殊条件{/if}</span> <!--，可领取<span style="color:{$val.color}; ">{$val.title_name}</span>头衔-->
		{if $val.is_receive == 1}
		<span class="got_bt go_title a_link" data-title_id="{$val.title_id}">已领取</span>
		{else}
		<!--退回会推出APP-->
		<!--<a href="/FrontTitle/apply_special_title">-->
		<span class="get_title_btn {if $val.is_qualified}get_bt go_title a_link{else}get_bt cant{/if} " data-title_id="{$val.title_id}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$val.title_id} ">去申请</span>
		<!--</a>-->
		{/if}
	</li>
	{/foreach}

</ul>
{/if}

<!--2017.09.18 su 头衔列表 end-->

<!--<ul class="get_title_list">-->
	<!--<li class="get_title">-->
		<!--<img class="title_icon" src="/Public/Images/front/front_img/icon_tie@3x.png">-->
		<!--<span class="title_name">{$ordinary_list[0]['title_name']}</span>-->
		<!--<span class="title_disc">累计回帖{$ordinary_list[0]['rank_up_num']}次，可领取{$ordinary_list[0]['title_name']}</span>-->
		<!--{if $ordinary_list[0]['is_receive']}-->
		<!--<span class="got_bt go_title a_link" data-title_id="{$ordinary_list[0]['title_id']}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[0]['title_id']}">已领取</span>-->
		<!--{else}-->
		<!--<span class="{if $ordinary_list[0]['is_qualified']}get_bt go_title a_link{else}get_bt cant{/if} " data-title_id="{$ordinary_list[0]['title_id']}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[0]['title_id']}">去领取</span>-->
		<!--{/if}-->
	<!--</li>-->
	<!--{if !$is_hidden}-->
	<!--<li class="get_title">-->
		<!--<img class="title_icon" src="/Public/Images/front/front_img/icon_shang@3x.png">-->
		<!--<span class="title_name">{$ordinary_list[1]['title_name']}</span>-->
		<!--<span class="title_disc">累计赞赏{$ordinary_list[1]['rank_up_num']}元，可领取{$ordinary_list[1]['title_name']}</span>-->
		<!--{if $ordinary_list[1]['is_receive']}-->
		<!--<span class="got_bt go_title a_link" data-title_id="{$ordinary_list[1]['title_id']}" -->
		<!--data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[1]['title_id']}">已领取</span>-->
		<!--{else}-->
		<!--<span class="{if $ordinary_list[1]['is_qualified']}get_bt go_title a_link{else}get_bt cant{/if} " data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[1]['title_id']}" data-title_id="{$ordinary_list[1]['title_id']}">去领取</span>-->
		<!--{/if}-->
	<!--</li>-->
	<!--{/if}-->
	<!--<li class="get_title">-->
		<!--<img class="title_icon" src="/Public/Images/front/front_img/icon_fenxiang@3x.png">-->
		<!--<span class="title_name">{$ordinary_list[2]['title_name']}</span>-->
		<!--<span class="title_disc">累计分享{$ordinary_list[2]['rank_up_num']}次，可领取{$ordinary_list[2]['title_name']}</span>-->
		<!--{if $ordinary_list[2]['is_receive']}-->
		<!--<span class="got_bt go_title a_link" data-title_id="{$ordinary_list[2]['title_id']}" data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[2]['title_id']}">已领取</span>-->
		<!--{else}-->
		<!--<span class="{if $ordinary_list[2]['is_qualified']}get_bt go_title a_link{else}get_bt cant{/if} " data-url="/FrontTitle/ordinary_title_detail/title_id/{$ordinary_list[2]['title_id']}" data-title_id="{$ordinary_list[2]['title_id']}">去领取</span>-->
		<!--{/if}-->
	<!--</li>-->
<!--</ul>-->

<!--<div class="special_title">-->
	<!--<img class="title_icon" src="/Public/Images/front/front_img/icon_teshu@3x.png">-->
	<!--<span class="special_title_name">特殊头衔申请</span>-->
	<!--<a href="/FrontTitle/apply_special_title" class="native_go"><span class="goto_apply">去申请</span></a>-->
<!--</div>-->
<!-- {include file="../Index/nav.html"} -->
{/block}
{block name="js"}
<!-- <script type="text/javascript" src="__PUBLIC__/Js/front/front_js/stackblur.js"></script>
 -->
<script>
	var title_id = 0;
	var is_click = false;
</script>
 {literal}
<script type="text/javascript">
	$(".a_link").on("click",function(){
			if (!is_wechat()) {
					
					var dataUrl = $(this).attr("data-url");
					console.log(dataUrl);


						var _json = JSON.stringify({
				            event: "to_jump",
				            params: {"url":dataUrl}
				        });

			        	if(is_ios()){

							window.webkit.messageHandlers.webviewEvent.postMessage(_json);
						}else{
							window.ResultAndroid.webviewEvent(_json);
						}

		  	}	
		});
	// function Blur(){  
          
 //        stackBlurImage( 'BgImg', 'canvas', 18,'main' );  
	// }
	// Blur(); 
	// $('.get_title').on('click','.got_bt',function(){
	// 	$(this).hide().siblings('.get_bt').show();
	// });
	// $('.get_title').on('click','.get_bt',function(){
	// 	$(this).hide().siblings('.got_bt').show();
	// });

	// $('.get_title').on('click','.go_title',function () {
	// 	title_id =$(this).attr('data-title_id');
	// 	console.log(title_id)
	// 	window.location.href = '/FrontTitle/ordinary_title_detail/title_id/'+title_id;
	// })

//	$('.goto_apply').on('click',function(){
//		console.log(4);
//		window.location.href = '/FrontTitle/apply_special_title';
//	});

	$('.title_box_2').on('click','.can_wear',function(){
		if (is_click == true) return;
		is_click = true;
		var _this = $(this);
		title_id  = _this.attr('data-title_id');
		console.log(title_id);
		$.ajax({
			type:'post',
			url:'/FrontTitle/set_wear',
			data:{title_id:title_id},
			success:function(data){
				if(data.code == 1){
					if(_this.hasClass('wear')){
						// $('p').remove('.no_wear');
						$('.no_wear').hide();
						var title=_this.text();
						var title_color = data.title_color;//zheli
						$('.title_box').append('<span class="wear_tag" data-title_id="'+title_id+'" style="background-color:'+title_color+'; background: '+title_color+'; border: 0.05rem solid '+title_color+';">'+title+'</span>');//这里
						_this.removeClass('wear');
						_this.addClass('grey');
						var length=$('.title_box').children('span').length;
						if(length>=6){
							$('.can_wear.wear').removeClass('wear').addClass('full');
						}
					}else

					if(_this.hasClass('grey')){
						var title=_this.attr('data-title_id');
						_this.removeClass('grey');
						_this.addClass('wear');
						$('.title_box span[data-title_id="'+title_id+'"]').remove();
						var length=$('.title_box').children('span').length;
						if(length<6){
							$('.can_wear.full').removeClass('full').addClass('wear');
						}
						if(length==0){
							$('.no_wear').show();
						}
					}
					native_listen('reload_personal');
				}else{
					//佩戴失败的状态．

				}

				is_click = false;
			}
		})
	});

    //弹窗
	$('.get_title_btn').click(function () {
        $('#get_title').show();
        $('.title_headbox').css('opacity','0.5');
        $('.toast_close').click(function () {
            $('#get_title').hide();
            $('.title_headbox').css('opacity','1');
        });
    });


</script>
{/literal}
{/block}
